<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>method实现姓名案例</title>
  <div id='root'>
    <!-- 
       计算属性:
       1. 定义：要用的属性不存在,要通过已有属性计算获取
       2. 原理: 底层使用了Object.defineproperty 方法提供的getter setter
       3. 计算属性最终会出现在vm对象上
       4. 计算属性修改必须使用set 响应修改,且set中要修改影响计算属性变化的data中的属性值
     -->
    姓<input type="text" v-model="firstName">
    名<input type="text" v-model="lastName">
    <h2>{{ fullName }}</h2>
    <h2>{{ fullName }}</h2>
    <h2>{{ fullName }}</h2>
    <h2>{{ fullName2 }}</h2>

  </div>
</head>
<body>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
   // 设置为 false 以阻止 vue 在启动时生成生产提示。
   Vue.config.productionTip = false
  // 创建一个vue实例
  const vm = new Vue({
    // el -> element 用于指定当前vue对象绑定哪个容器,值通常为css选择器字符串
    el: '#root',
    // data 用于存储数组,数据供el所指定的容器去使用 
    data: {
      firstName: '李',
      lastName: 'cj',
    },
    computed: {
      fullName: {
        //  get作用:当页面读取属性fullName 时,get方法就会被调用,且返回值就作为fullName的值
        //  get什么时候被调用: 1.初次读取fullName时, 2.所依赖的数据变化时(计算属性中有缓存)
        get() {
          console.log("get被调用");
          return this.firstName + '-' + this.lastName; 
        },
        set(value) {
          console.log('set',value);
          const arr = value.split('-');
          this.firstName = arr[0];
          this.lastName = arr[1];
        }
      },
      // 当计算属性中不需要set 时,可以简写成匿名函数,该函数代表的就是get方法
      fullName2(){
        return this.firstName + '-' + this.lastName; 
      }
    }
  });
</script>
</body>
</html>